<template>
    <div class="wrapper">
        <!-- <div class="status-bar" :style="{'height': statusHeight}"></div> -->
        
        <!-- <div class="header-search">
            <wxc-searchbar class="search" :placeholder="placeholder"
                    :bar-style="barStyle"
                    return-key-type="done"
                    cancel-label=""
                    @wxcSearchbarInputReturned="wxcSearchbarInputReturned"
                    @wxcSearchbarCancelClicked="wxcSearchbarCancelClicked"
                    @wxcSearchbarInputOnInput="wxcSearchbarInputOnInput">
            </wxc-searchbar>
        </div> -->
        <div class="header-search">
            <input class="search" :placeholder="placeholder"
                    return-key-type="done"
                    v-model="filter.number"
                    style="tint-color: #f49428;"
                    @return="wxcSearchbarInputReturned()">
            </input>
            <text class="more" @click="showMore">&#xe748;</text>
        </div>
        <wxc-popover ref="wxc-popover"
                 :buttons="btns"
                 :position="popoverPosition"
                 :arrowPosition="popoverArrowPosition"
                 @wxcPopoverButtonClicked="popoverButtonClicked"></wxc-popover>

        <scroller class="container" :style="scrollerStyle" alwaysScrollableVertical="true">
            <refresh :style="refreshStyle" v-show="false" class="refresh" @refresh="onrefresh()" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <div class="list">
                <div class="policyCell"  v-for="(item,index) in formItem" :key="index">
                    <wxc-cell @wxcCellClicked="wxcCellClicked" title="电梯工号">
                    <image class="image" slot="label" src="bmlocal://assets/liftId.png"></image>
                    <text :style="valueStyle">{{item.number}}</text>
                    <image class="locationImg" src="bmlocal://assets/location.png"></image>
                    </wxc-cell>

                    <wxc-cell @wxcCellClicked="gotoDetail(item)" :has-arrow="true" title="小区">
                    <image class="image" slot="label" src="bmlocal://assets/home.png"></image>
                    <text :style="valueStyle">{{item.comName}}</text>
                    </wxc-cell>

                    <wxc-cell @wxcCellClicked="wxcCellClicked"
                            :has-margin="true" :has-bottom-border="false" title="年检日期">
                    <image class="image" slot="label" src="bmlocal://assets/calendar.png"></image>
                    <text :style="valueStyle">{{item.nextAnnual}}</text>
                    </wxc-cell>
                </div>
                <text class='text-no' v-if="formItem.length<=0" >暂无数据</text>
            </div>
        </scroller>

    </div>
</template>
<script>

import {buiHeader,buiIcon} from 'bui-weex'
import { WxcCell,WxcSearchbar,WxcLoading,Utils,WxcPopover} from 'weex-ui';
export default {
    components: {
        buiHeader,
        buiIcon,
        Utils,
        WxcCell,
        WxcLoading,
        WxcSearchbar,
        WxcPopover,
    },
    created() {
        
    },
    data() {
        return {
            token:'',
            formItem: [],
            filter:{},
            placeholder:'输入电梯工号',
            valueStyle:{
                color:'rgb(153, 153, 153)',
            },
            barStyle:{
                backgroundColor:'#f49428',
                // width:500,
            },
            btns:[{text:'全部',key:''}],
            popoverPosition:{x:-5,y:60},
            popoverArrowPosition:{pos:'top',x:-10},
            showLoading:false,
            mask:true,
            showMenu:false,
            refreshing: false,
            showRefresh:false,
        }
    },
    methods: {
        showMore(){
            this.$refs['wxc-popover'].wxcPopoverShow();
        },
        popoverButtonClicked(obj){
            this.filter.communityId = obj.key
            this.getPolicyList()
        },
        wxcSearchbarInputReturned(e){
            // this.filter.number = e.value
            this.getPolicyList()
        },
        wxcSearchbarInputOnInput(e){
            
        },
        wxcSearchbarCancelClicked(){
            this.filter = {}
            this.getPolicyList()
        },
        onrefresh(){
            this.refreshing = true
            this.getPolicyList()
        },
        //保单详情页
        gotoDetail(item){
            
            //跳转详情页
            this.$router.open({
                name: 'maintenaceDetail',
                params:{liftResult:item}
            })
        },
        getPolicyList(){
            this.$notice.loading.show()
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': `Bearer `+ this.token
                },
                method: 'POST',    
                name: 'listAnnual',
                data: this.filter
            }).then(resData => {
                if(resData.success){
                    this.formItem = resData.data
                    if(!this.filter){
                        this.$storage.set('myAnnualList', JSON.stringify(resData.data))
                    }
                }else{
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }
            }, error => {
                this.$notice.toast({
                    message: '网络错误'
                })
            })
            this.$notice.loading.hide()
            setTimeout(() => {
                this.refreshing = false
            }, 500)
        },
        listMyCommunity(){
            this.$notice.loading.show()
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': `Bearer `+ this.token
                },
                method: 'GET',    
                name: 'listMyCommunity',
            }).then(resData => {
                if(resData.success){
                    this.btns = this.btns.concat(resData.data.map(function (item, index) {
                        return {
                            text: item.name,
                            key: item.id
                        }
                    }))
                    console.log(this.btns);
                    
                }else{
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }
            }, error => {
                this.$notice.toast({
                    message: '网络错误'
                })
            })
            this.$notice.loading.hide()
        }
    },
    created(){
        this.$notice.loading.show()
        if(Utils.env.isAndroid()){
            this.refreshStyle = {marginTop:'-90px'}
        }
        const tabPageHeight = Utils.env.getPageHeight()
        const containerHeight = tabPageHeight-90
        this.scrollerStyle ={ height: containerHeight + 'px' }

        // 获取token
        this.token = this.$storage.getSync('token')
        if(!this.token){
            this.$router.setHomePage('/pages/login.js')
        }

        // 获取缓存数据
        this.$storage.get('myAnnualList').then(resData => {
             this.formItem = JSON.parse(resData);
        },error => {
            this.getPolicyList()
        })
        this.listMyCommunity();
        this.$notice.loading.hide()
    }
    
}
</script>
<style scoped>
.status-bar{
    background-color:#f49428;
}
.staffList {
    width: 750px;
    background-color: #f2f3f4;
}
.image {
    width: 50px;
    height: 50px;
    margin-right: 20px;
}
.locationImg{
    width: 40px;
    height: 50px;
}
.container {
    flex: 1;
    width: 750px;
    background-color: #f2f3f4;
}
.refresh {
    width: 750px;
    height: 100px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}
.indicator {
    margin-top: 16px;
    height: 80px;
    width: 80px;
    color: #f49428;
}
.list{
    /* margin-top: -80px; */
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
}
.text-no{
  text-align: center;
  margin-top: 100;
  font-size: 35;
  color: #999999
}
.header-search{
    background-color: #f49428;
    width: 750px;
    height: 70px;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
}
.search{
    flex:8;
    background-color: #f2f3f4;
    height: 55px;
    padding-left: 10px;
    /* border-width: 1px; */
    border-radius: 10px;
    margin-left:20px;
}
.menuIcon{
    font-family: iconfont;
    color: #ffffff;
    font-size: 50px;
    flex:1;
}
.more{
    font-family: iconfont;
    color: #ffffff;
    font-size: 40px;
    flex:0.8;
    margin-left: 20px;
}
</style>

